<template>
  <div class="flashSetting">
    <div class="mainContent"
         v-if="dataArr.length&&isShow">
      <div class="box">
        <ul>
          <li v-for="(item,index) in dataArr"
              :key="index">
            <img class="imgList"
                 :src="item.materialUrl">
            <Checkbox class="checkde"
                      v-model="item.checkd"
                      @click.native="handleCheckAll(item,index)">
            </Checkbox>
            <p class="time">{{item.materialName}}</p>
            <p class="time">{{item.updateTime}}</p>
          </li>

        </ul>
      </div>
    </div>
    <div class="content_page"
         style="text-align:right"
         v-if="dataArr.length&&isShow">
      <Page :total="total"
            ref="pages"
            :current="data.offset"
            @on-change="selectPage"
            :page-size="data.limit"
            @on-page-size-change="selectSize"
            class-name="page"
            show-sizer
            show-total />
    </div>
    <div class="nodata"
         v-if="!dataArr.length&&isShow">
      <img :src="src">
    </div>
    <div class="bottom">
      <Button type="primary"
              class="btn"
              @click="handleSubmit"
              v-if="dataArr.length&&isShow">确认</Button>
      <Button class="btn"
              style="margin-left:20px;"
              @click="cancel">取消</Button>
    </div>
  </div>
</template>
<script>
import { routeEqual } from '@/libs/util'
import { getMaterialInfos, saveMaterialInfos } from '@/api/setting'
import error from '@/assets/images/error-page/error.svg'
export default {
  data () {
    return {
      title: '刷卡器待机动画设置',
      dataArr: [],
      src: error,
      isShow: false,
      data: {
        offset: 1,
        limit: 10,
        merchantId: this.$store.state.user.merchantId,
        materialType: 1,
        shopId: this.$route.query.id
      },
      saveParmas: {
        merchantId: this.$store.state.user.merchantId,
        shopId: this.$route.query.id,
        materialType: '1',
        materialId: '',
        creatorId: this.$store.state.user.userId,
        creatorName: this.$store.state.user.userName,
        shopIdList: [this.$route.query.id],
        batchFlag: 1
      },
      total: 10,
      datalist: [],
      height: 0
    }
  },
  computed: {
  },
  mounted () {
    this.height = document.body.clientHeight - 310 + 'px'
    this.getList({ offset: 0 })
    if (!this.hasPermission('moms:setting:idlescreen')) {
      this.$router.replace({ name: 'error_401' })
    }
  },
  methods: {
    selectPage (page) {
      this.data.offset = page
      this.getList({ offset: (page - 1) * this.data.limit })
    },
    closeModal () {
      this.$store.commit('closeTag', this.$route)
      this.$store.commit('setTagNavList', this.$store.state.app.tagNavList.filter(item => !routeEqual(this.$route, item)))
      this.$nextTick(() => {
        this.$router.push({
          name: 'store_setting'
        })
      })
    },
    selectSize (num) {
      this.data.limit = num
      this.getList({ offset: (this.data.offset - 1) * this.data.limit })
    },
    // 获取列表
    getList (res) {
      getMaterialInfos({ ...this.data, offset: (this.data.offset - 1) * this.data.limit, ...res }).then(res => {
        if (res.data.status === 200) {
          this.isShow = true
          this.dataArr = res.data.data
          this.total = res.data.totalCount
          this.dataArr.forEach((ele, idx) => {
            this.$set(ele, 'checkd', false)
            if (ele.shopId) {
              ele.checkd = true
              this.saveParmas.materialId = ele.materialId
            }
            if (ele.materialName.split('.')[0] === 'K802_P0000') {
              let item = this.dataArr.splice(idx, 1)
              this.dataArr.unshift(item[0])
            }
          })
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    // 单选
    handleCheckAll (item, index) {
      this.dataArr.forEach(ele => {
        if (ele.materialId === item.materialId) {
          ele.checkd = !ele.checkd
          if (ele.checkd) {
            this.saveParmas.materialId = ele.materialId
          }
        } else {
          ele.checkd = false
        }
      })
    },
    handleSubmit () {
      saveMaterialInfos(this.saveParmas).then(res => {
        if (res.data.status === 200) {
          this.$Message.success('物料设置成功')
          this.closeModal()
          this.getList({ offset: (this.data.offset - 1) * this.data.limit })
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    cancel () {
      this.closeModal()
    }
  }
}
</script>
<style lang="less" scoped>
.flashSetting {
  padding-top: 36px;
  .box {
    width: 1044px;
    min-width: 1044px;
    margin: auto;
    > ul {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      > li {
        width: 180px;
        list-style: none;
        height: 149px;
        // background-color: red;
        margin-right: 36px;
        margin-bottom: 36px;
        position: relative;
        .checkde {
          position: absolute;
          top: 8px;
          right: 8px;
          z-index: 100;
        }
        .imgList {
          width: 180px;
          height: 120px;
          vertical-align: top;
        }
        .time {
          margin-top: 12px;
          height: 17px;
          line-height: 17px;
          text-align: center;
          font-size: 12px;
          color: #808695;
        }
      }
      > li:nth-of-type(5n) {
        margin-right: 0;
      }
    }
  }
  .bottom {
    height: 80px;
    display: flex;
    align-items: center;
    width: 1044px;
    min-width: 1044px;
    margin: auto;
    .btn {
      width: 100px;
      height: 32px;
    }
  }
  .nodata {
    text-align: center;
  }
}
</style>
